<template>
    <div class="index">
        <van-nav-bar title="代理升级" left-arrow @click-left="backUp"></van-nav-bar>
        <ul class="agent">
            <li v-for="item in agentList" :key="item.levelId">
                <div>
                    <h3>{{item.name}}</h3>
                    <button @click="goVipGoods(item.levelId)">立即升级</button>
                </div>
                <img :src="item.icon" alt/>
            </li>
        </ul>
    </div>
</template>

<script>
    import {Lazyload, Row, Col} from "vant";
    import api from "../../utils/restful";

    export default {
        components: {
            [Row.name]: Row,
            [Col.name]: Col
        },

        data() {
            return {
                agentList: []
            };
        },

        mounted() {
            this.getVipShow();
        },
        methods: {
            getVipShow() {
                this.$axios({
                    method: "get",
                    url: api.upgradeList
                }).then(res => {
                    console.log(res);
                    // const agentList = res.filter(e => {
                    //     return e.levelId >= 3;
                    // });
                    this.agentList = res.data;
                });
            },
            goto(link) {
                this.$router.push({name: link});
            },
            goVipGoods(levelId) {
                this.$router.push({name: "upgradegoods", query: {levelId: levelId}});
            },
            backUp() {
                this.$router.go(-1);
            }
        }
    };
</script>

<style lang="less" scoped>
    @import "~style/common.less";

    .van-icon-xingxing:before {
        content: "\e610";
        position: relative;
        top: 50%;
        // left: -2Px;
        transform: translateY(-20%);
    }

    // 1px border
    .setTopLine(@c:@borderColor) {
        position: relative;
        &:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid @c;
        }
        [data-dpr="1"] &:before {
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
        }
    }

    .index {
        // background-color: @borderColor;
        background-color: @bgColor;

        .grid {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            text-align: center;
            background-color: @bgColor;
            margin: 0 auto;
            padding: 15px;

            li {
                flex-basis: 25%;
                margin-bottom: 5px;

                img {
                    height: 30px;
                    width: 30px;
                }

                h3 {
                    .font-dpr(12px);
                    color: @fontColorP;
                    font-weight: 400;
                    line-height: 2;
                }
            }
        }

        /deep/ .van-swipe {
            // border: 1px solid red;
            text-align: center;

            img {
                width: 100%;
            }
        }

        .banner {
            max-width: 100%;
            background-size: cover;
        }
    }

    .van-tabbar {
        height: 48px;
        // transform: translateY(-50%);
        &-item {
            color: @fontColorH3 !important;

            &--active {
                color: @priColor !important;
            }

            &__icon {
                .font-dpr(16px) !important;
            }

            &__text {
                .font-dpr(12px) !important;
            }
        }
    }

    /deep/ .van-nav-bar .van-icon {
        .font-dpr(28px) !important;
        color: @fontColorP !important;
    }

    .product-title {
        .textoverflow(1);
    }

    .agent {
        position: relative;
        width: 94vw;
        margin: 0 auto;
        box-sizing: border-box;

        li {
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            box-shadow: 0px 1px 21px 0px rgba(210, 216, 217, 0.2);
            border-radius: 8px;
            margin-bottom: 10px;

            h3 {
                color: @priColor;
                .font-dpr(16px);
                line-height: 3;
            }

            p {
                color: @fontColorP;
                .font-dpr(14px);
                line-height: 1.5;
            }

            img {
                width: 150px;
            }

            button {
                width: 80px;
                height: 30px;
                background: rgba(221, 206, 170, 1);
                border-radius: 6px;
                color: #fff;
            }
        }
    }
</style>
